<template>
  <button
    @click="btnClick"
    :class="{maxLarge,Large,minsmall,small,yuan,fang,banuyan,disabled}"
    :style="`--style--bgcolor:${bgcolor}`"
  >{{value}}</button>
</template>
<script lang='ts'>
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component({})
export default class BtnUI extends Vue {
  @Prop(String) private value: string | undefined;
  @Prop(Boolean) private maxLarge: boolean | undefined;
  @Prop(Boolean) private Large: boolean | undefined;
  @Prop(Boolean) private minsmall: boolean | undefined;
  @Prop(Boolean) private small: boolean | undefined;
  @Prop(Boolean) private yuan: boolean | undefined;
  @Prop(Boolean) private fang: boolean | undefined;
  @Prop(Boolean) private banuyan: boolean | undefined;
  @Prop(Boolean) private disabled: boolean | undefined;
  @Prop(String) private color: string | undefined;

  @Emit("BtnCli") private EventbtnClick(event: MouseWheelEvent) {}
  private get bgcolor() {
    if (this.color) {
      return this.color;
    } else {
      return "rgb(62, 123, 236)";
    }
  }
  private btnClick(event: MouseWheelEvent) {
    if (!this.disabled) {
      this.EventbtnClick(event);
    }
  }
}
</script>
<style lang='stylus' scoped>
resize($a, $b, $c) {
  width: $a;
  height: $b;
  font-size: $c;
  line-height: $b;

  &.yuan {
    height: @width;
    border-radius: 50%;
  }

  &.fang {
    height: @width;
    border-radius: 0;
  }

  &.banuyan {
    border-radius: (@height / 2);
  }

  &.disabled {
    background: #f5f5f5;
    cursor: not-allowed;
  }

  &.disabled:hover {
    filter: brightness(100%);
  }
}

button {
  border: none;
  color: #fff;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
  resize(100px, 40px, 16px);
  background: var(--style--bgcolor);

  &:hover {
    filter: brightness(120%);
  }

  &.maxLarge {
    resize(140px, 50px, 24px);
  }

  &.Large {
    resize(120px, 45px, 20px);
  }

  &.minsmall {
    resize(80px, 35px, 14px);
  }

  &.small {
    resize(60px, 30px, 12px);
  }
}
</style>